import React, { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';




class EchartCurve extends PureComponent {

    componentDidMount() {
        const { id } = this.props;
        // 初始化
        const myChart = echarts.init(document.getElementById(id));
        // 绘制图表
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['供冷量', '供热量', '发电量']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['0', '1', '2', '3', '4', '5', '6',
                        '7', '8', '9', '10', '11',
                        '12', '13', '14', '15', '16', '17',
                        '18', '19', '20', '21', '22', '23'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '发电量',
                    min: 0,
                    max: 4000,
                    interval: 500,
                    axisLabel: {
                        formatter: '{value} kWh'
                    }
                },
                {
                    type: 'value',
                    name: '供冷量',
                    min: 0,
                    max: 45,
                    interval: 5,
                    axisLabel: {
                        formatter: '{value} GJ'
                    }
                }
            ],
            series: [
                {
                    name: '供冷量',
                    type: 'line',
                    data: [1639.04,
                        1609.96,
                        1555.93,
                        1442.24,
                        1320.67,
                        1234.51,
                        2447.89,
                        3170.17,
                        3622.59,
                        3802.90,
                        3862.38,
                        3773.03,
                        3526.72,
                        3548.30,
                        3673.53,
                        3730.11,
                        3708.63,
                        3619.16,
                        3434.70,
                        3232.66,
                        3014.70,
                        2657.74,
                        2090.05,
                        1873.05]
                },
                {
                    name: '供热量',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [
                        16.39,
                        16.09,
                        15.55,
                        14.42,
                        13.20,
                        12.34,
                        24.47,
                        31.70,
                        36.22,
                        38.02,
                        38.62,
                        37.73,
                        35.26,
                        35.48,
                        36.73,
                        37.30,
                        37.08,
                        36.19,
                        34.34,
                        32.32,
                        30.14,
                        26.57,
                        20.90,
                        18.73]
                },
                {
                    name: '发电量',
                    type: 'bar',
                    data: [1639.04,
                        1609.96,
                        1555.93,
                        1442.24,
                        1320.67,
                        1234.51,
                        2447.89,
                        3170.17,
                        3622.59,
                        3802.90,
                        3862.38,
                        3773.03,
                        3526.72,
                        3548.30,
                        3673.53,
                        3730.11,
                        3708.63,
                        3619.16,
                        3434.70,
                        3232.66,
                        3014.70,
                        2657.74,
                        2090.05,
                        1873.05]
                }
            ]
        });
    }

    
    render() {
        const { id } = this.props;
        return (
          <div id={id} style={{ width: '100%', minHeight: '300px' }} />
        );
    }
}

export default EchartCurve;
